<template>
  <transition name="translate">
    <div class="attestation-wrap">
      <div class="title">
        <div class="img-wrap">
          <div class="img-content"
               w-383-77
               aspectratio>
            <img src="../../../assets/images/attestation.png"
                 alt=""
                 aspectratio-content>
          </div>
        </div>
      </div>
      <div class="attestation-bottom">
        <div class="attestation-bottom-content">
          <ul class="list">
            <li class="item"
                border-bottom-1px
                @click="handlePerson">
              <div class="item-title">个人信息</div>
              <div class="attestation-content">
                <p class="desc"
                   :class="{red: person === 0}"
                   v-show="typeof person === 'number'">{{person === 0?unverified:authentication}}</p>
                <i class="iconfont icon-xiangyou"></i>
              </div>
            </li>
            <li class="item"
                border-bottom-1px
                @click="handleContact">
              <div class="item-title">紧急联系人</div>
              <div class="attestation-content">
                <p class="desc"
                   :class="{red: contacts === 0}"
                   v-show="typeof contacts === 'number'">{{contacts === 0?unverified:authentication}}</p>
                <i class="iconfont icon-xiangyou"></i>
              </div>
            </li>
            <li class="item"
                border-bottom-1px
                @click="handleBank">
              <div class="item-title">银行卡</div>
              <div class="attestation-content">
                <p class="desc"
                   :class="{red: bank === 0}"
                   v-show="typeof bank === 'number'">{{bank === 0?unverified:authentication}}</p>
                <i class="iconfont icon-xiangyou"></i>
              </div>
            </li>
          </ul>
          <common-button @submit="handleSubmit"
                         :content="buttonTitle"
                         class="attestation-btn"></common-button>
        </div>

      </div>
      <div class="gohome"
           @click="handleHome"
           v-if="showHome">去首页</div>
    </div>
  </transition>
</template>
<script>
import CommonButton from 'common/button/button'
import { mapMutations } from 'vuex'
export default {
  name: 'attestation',
  components: {
    CommonButton
  },
  data () {
    return {
      buttonTitle: '开始借款',
      person: '',
      contacts: '',
      bank: '',
      unverified: '未认证',
      authentication: '已认证'
    }
  },
  created () {
    this.getState()
  },
  computed: {
    showHome () {
      if (Number(this.person) === 1 && Number(this.contacts) === 1 && Number(this.bank === 1)) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.$router.push({
          path: '/borrow/attestationNow'
        })
      }
    },
    check () {
      if (parseInt(this.person) !== 1) {
        this.$toast({
          duration: 1000,
          message: '个人信息未认证'
        })
        return false
      }
      if (parseInt(this.contacts) !== 1) {
        this.$toast({
          duration: 1000,
          message: '紧急联系人未认证'
        })
        return false
      }
      if (parseInt(this.bank) !== 1) {
        this.$toast({
          duration: 1000,
          message: '银行卡未认证'
        })
        return false
      }
      return true
    },
    getState () {
      this.$api.borrow.getState()
        .then(this.getStateSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getStateSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.person = data.person
        this.contacts = data.contacts
        this.bank = data.bank
        this.changePersonState(data.person)
        this.changeContactState(data.contacts)
        this.changeBankState(data.bank)
        this.$localStorage.set('person', Number(data.person))
        this.$localStorage.set('contacts', Number(data.contacts))
        this.$localStorage.set('bank', Number(data.bank))
      }
    },
    ...mapMutations({
      changePersonState: 'changePersonState',
      changeContactState: 'changeContactState',
      changeBankState: 'changeBankState'
    }),
    handlePerson () {
      this.$router.push({
        path: '/borrow/identity'
      })
    },
    handleContact () {
      if (this.person === 1) {
        this.$router.push({
          path: '/borrow/contacts'
        })
      } else {
        this.$toast({
          duration: 1000,
          message: '请认证个人信息'
        })
      }
    },
    handleBank () {
      if (this.person === 1 && this.contacts === 1) {
        this.$router.push({
          path: '/borrow/card'
        })
      } else if (this.person === 0) {
        this.$toast({
          duration: 1000,
          message: '请认证个人信息'
        })
      } else if (this.contacts === 0) {
        this.$toast({
          duration: 1000,
          message: '请认证紧急联系人信息'
        })
      }
    },
    handleHome () {
      this.$router.push('/home')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.attestation-btn >>> .submit
  background-color #2F3542

.attestation-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  overflow-y scroll
  z-index 30

  .title
    height 300px
    background linear-gradient(-90deg, rgba(47, 53, 66, 1), rgba(87, 96, 111, 1))
    box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)
    display flex
    justify-content center
    align-items center

    .img-wrap
      width 383px

  .attestation-bottom
    padding()
    padding-top 20px

    .attestation-bottom-content
      width 100%
      background-color $common_bgc
      box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
      border-radius 24px
      padding-left 32px
      padding-right 32px
      padding-bottom 64px
      box-sizing border-box

      .list
        width 100%
        background-color $common_bgc
        margin-bottom 72px

        .item
          width 100%
          height 110px
          display flex
          justify-content space-between
          align-items center

          .item-title, .attestation-content
            font-size $shop_name
            line-height 110px
            font-weight 400
            color #2F3542

          .attestation-content
            display flex
            align-items center

            i
              font-size $common_fz
              color $icon_color
              margin-left 30px

            .red.desc
              color $agreement

.gohome
  position fixed
  bottom 100px
  right 50px
  width 120px
  height 120px
  border-radius 50%
  background-color $common_bgc
  box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)
  line-height 120px
  text-align center
  font-size $common_fz
  color $id_input

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
